<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nanozyme of AHUCM</title>
    <link href="{{ url_for('static', filename='layui/css/layui.css') }}" rel="stylesheet">
    <style>
        body {
            margin-bottom: 100px;
        }
    </style>
</head>

<!-- 导航栏 -->
<div class="layui-header header">
    <div class="main">
        <ul class="layui-nav layui-nav-left" lay-filter="filter">
            <a href="/" style="position: absolute; top: -8px; left: 50px; width: 260px; height: 80px;
               background:url(../static/img/logo.jpg) no-repeat; background-size:contain"></a>
            <li class="layui-nav-item nav-left" style="margin-left:320px;">
                <a href="/">HOME</a>
            </li>
            <li class="layui-nav-item nav-left">
                <a href="gpt">GPT</a>
            </li>
            <li class="layui-nav-item nav-left layui-this">
                <a href="javascript:">PREDICTION</a>
                <dl class="layui-nav-child">
                    <dd><a href="base">TYPE</a></dd>
                    <dd><a href="advanced">ACTIVITY</a></dd>
                    <dd><a href="compare_predictions">COMPARE PREDICTIONS</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" style="margin-left: 20px;">
                <a href="database">DATA CENTER</a>
            </li>
            <li class="layui-nav-item">
                <a href="offer_a_sample">OFFER A SAMPLE</a>
            </li>
            <li class="layui-nav-item">
                <a href="about">ABOUT</a>
            </li>
        </ul>
<!--        <ul class="layui-nav layui-layout-right layui-nav-right" lay-filter="filter">
            <li class="layui-nav-item">
                <a href="javascript:">USER</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:">LOGOUT</a></dd>
                </dl>
            </li>
        </ul>-->
    </div>
</div>

<div style="width: 90%; height: 100px; margin: auto; margin-top: 20px;">
    <p style="font-weight: bold;font-size :26px;margin-left: 100px">Prediction catalytic activity</p>
    <p style="font-weight: bold;font-size :22px;margin-left: 100px">Enter the formula to predict nanozyme peroxidase
        activity</p>
    <div style="width: 90%; height: 100px; margin: auto; margin-top: 20px;margin-left: 100px">
        <form class="layui-form layui-form-pane" id="btn-submit">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 180px">Chemical formula</label>
                    <div class="layui-input-inline">
                        <input type="text" name="nano_enzyme_formula" autocomplete="off"
                               class="layui-input" lay-verify="required" lay-reqtext="Please enter the chemical formula" placeholder="Please input">
                    </div>
                </div>
            </div>
            <!-- summit button-->
            <div class="layui-form-item" style="margin-top: 20px">
                <div class="layui-col-md6">
                    <button class="layui-btn" style="background-color: #336b03" lay-submit lay-filter="demo-submit">
                        Predict
                    </button>
                </div>
                <div class="layui-col-md6">
                    <!--  <button type="reset" class="layui-btn layui-btn-danger"style="background-color: #c44d05">Clear</button> -->
                </div>
            </div>
        </form>
    </div>
    <p style="font-weight: bold;font-size :26px;margin-left: 100px;margin-top: 30px; display: none" id="predTitle">
        TYPE PREDICTION</p>
    <div style="width: 182px; height: 100px; margin-left: 100px; margin-top: 20px">
        <table class="layui-hide" id="ID-table-base"></table>
    </div>
</div>


<script src="{{ url_for('static', filename='layui/layui.js') }}"></script>
<script src="{{ url_for('static', filename='darkreader/darkreader.min.js') }}"></script>

<script>
    DarkReader.enable({
        brightness: 200,
        contrast: 150,
        sepia: -30
    });

    layui.use(function () {
        var $ = layui.$;
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;

        // 提交事件
        form.on('submit(demo-submit)', function (data) {
            var field = data.field; // 获取表单全部字段值
            console.log(field)

            // 此处可执行 Ajax 等操作
            $.ajax({
                url: '/prediction/base',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    console.log(result.data)

                    // 已知数据渲染
                    var inst = table.render({
                        elem: '#ID-table-base',
                        cols: [[ //标题栏
                            {field: 'Catalytic activity', title: 'Catalytic activity', width: 180,}
                        ]],
                        data: [result['data']],
                        page: false,
                    });

                    document.getElementById("predTitle").style.display = "block";
                }
            })
            return false; // 阻止默认 form 跳转
        });
    });
</script>

<!--页脚-->
<footer style="position: fixed; bottom: 0px; width: 100%; height:60px;
            background-color: #eee;
            text-align: center;">
    <div style="margin-top: 14px">
        <p>AHUCM 2024 &copy; ahtcm.edu.cn</p>
        <p>Anhui University of Chinese Medicine</p>
    </div>
</footer>